<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="省" id="province"></select>
    <select name="市" id="city"></select>
    <select name="县" id="county"></select>
</body>
</html>
<script>
    const province = document.querySelector('#province')
    const city = document.querySelector('#city')
    const county = document.querySelector('#county')

    function renderView(dom,data){
        dom.innerHTML = `
            ${
                data.map(item => {
                return `<option value="${item.ID}">${item.AddName}</option>`
            }).join('')
            }
        `
    }

    let domcity = null;domcounty = null;domprovince = null;



    const xhr = new XMLHttpRequest()
    xhr.open('get','http://127.0.0.1:6677',true)
    xhr.send()
    xhr.onload = function(){
        const data = JSON.parse(xhr.response)

        domprovince = data
        // console.log(province);
        renderView(province,data)

        domcity = data[0].children;

        renderView(city,domcity)

        domcounty = domcity[0].children

        renderView(county,domcounty)

    }

    province.onchange = function(e){
        // console.log(e.target.value);
        datacity = domprovince.find(item => item.ID == e.target.value).children

        renderView(city,datacity)

        domprovince = datacity[0].children

        renderView(county,domprovince)
    }

    city.onchange = function(e){
        const dataCounty = datacity.find(item => item.ID == e.target.value)

        domprovince = dataCounty.children
        renderView(county,domprovince)
    }

</script>